<template>
    <div class="card pos-dr">
      <el-form  ref="speedFormRef" :model="driveForm" label-width="100px" style="max-width:600px">
          <el-form-item label="X轴位置" prop="PositionX">
            <el-input v-model.number="driveForm.PositionX" />
          </el-form-item>
          <el-form-item label="Y轴位置" prop="PositionY">
            <el-input v-model.number="driveForm.PositionY" />
          </el-form-item>
          <el-form-item label="X轴速度" prop="speedX">
            <el-input v-model.number="driveForm.speedX" />
          </el-form-item>
          <el-form-item label="Y轴速度" prop="speedY">
            <el-input v-model.number="driveForm.speedY" />
          </el-form-item>
          <el-form-item>
            <el-button class="pry-btn" @click="onSubmit">行驶到指定位置</el-button>
            <el-button class="cancel-btn" @click="handleStop">停止</el-button>
            <!-- <el-button class="cancel-btn" @click="resetForm(speedFormRef)">重置</el-button> -->
          </el-form-item>
      </el-form>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { autoMoveApi } from '@/api/drive-api.js'
import { failedNotify, successNotify } from '@/comm/index.js'

const driveForm = reactive({
  PositionX: 100,
  PositionY: 1000,
  speedX: 10,
  speedY: 10,

})
const speedFormRef = ref()

const onSubmit = () => {
  console.log('submit!', driveForm)
  autoMoveApi(driveForm, response => {
    successNotify('持续行驶成功')
  },
  (error) => {
    console.log("error:", error)
    failedNotify('持续行驶失败')
   })
}

function handleStop() {
  stopMoveApi((response) => {
    successNotify('停止行驶成功');
    console.log('停止行驶成功');
  }, (error)=> {
    failedNotify('停止行驶失败');
    console.error('停止行驶失败', error);
  })
}
const resetForm = (formEl) => { 
  if (!formEl) return; 
  formEl.resetFields(); 
  }
</script>

<style lang="scss" scoped>
.pos-dr {
  padding-top: 2.5em;
  padding-bottom: 1.5em;
}
</style>